<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加车辆</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/css/mobile/demos.css"/>
    <link rel="stylesheet" href="/css/wechat/addcar.css">
    <link rel="stylesheet" href="/css/mobile/plate_number.css"/>
</head>
<body ontouchstart>
<header class="demos-header">
    <h1 class="demos-title">车牌绑定</h1>
</header>
<div class="bd">
    <div class="weui-cells">
        <div id="carLicenseBox">
            <div class="carLicenseMain">
                <ul id="carNumber">
                    <li class="active">省</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li class="xinnengyuan"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="weui-cells">
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label class="weui-label">小区</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" id="community">
                    <option th:each="community : ${communityInfos}" th:text="${community.cName}"
                            th:attr="communityId=${community.id}"></option>
                </select>
            </div>
        </div>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn weui-btn_primary submitBtn" href="javascript:;" id="submitBtn">提交</a>
    </div>
</div>
<div id="keyboardBox">
    <div class="provienceBox" id="provienceBox">
        <ul>
            <li>京</li>
            <li>津</li>
            <li>渝</li>
            <li>沪</li>
            <li>冀</li>
            <li>晋</li>
            <li>辽</li>
            <li>吉</li>
            <li>黑</li>
            <li>苏</li>
        </ul>
        <ul>
            <li>浙</li>
            <li>皖</li>
            <li>闽</li>
            <li>赣</li>
            <li>鲁</li>
            <li>豫</li>
            <li>鄂</li>
            <li>湘</li>
            <li>粤</li>
            <li>琼</li>
        </ul>
        <ul>
            <li>川</li>
            <li>贵</li>
            <li>云</li>
            <li>陕</li>
            <li>甘</li>
            <li>青</li>
            <li>蒙</li>
            <li>桂</li>
            <li>宁</li>
            <li>新</li>
        </ul>
        <ul>
            <li class="changeContentBtn other">ABC</li>
            <li>藏</li>
            <li>使</li>
            <li>领</li>
            <li>警</li>
            <li>学</li>
            <li>港</li>
            <li>澳</li>
            <li class="deleteBtn other"><img src="img/backDeleteImg.jpg"/></li>
        </ul>
    </div>
    <div class="textBox" id="textBox">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
        <ul>
            <li>Q</li>
            <li>W</li>
            <li>E</li>
            <li>R</li>
            <li>T</li>
            <li>Y</li>
            <li>U</li>
            <li>I</li>
            <li>O</li>
            <li>P</li>
        </ul>
        <ul>
            <li>A</li>
            <li>S</li>
            <li>D</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>J</li>
            <li>K</li>
            <li>L</li>
        </ul>
        <ul>
            <li class="changeContentBtn other">返回</li>
            <li>Z</li>
            <li>X</li>
            <li>C</li>
            <li>V</li>
            <li>B</li>
            <li>N</li>
            <li>M</li>
            <li class="deleteBtn other"><img th:src="@{/img/backDeleteImg.jpg}"/></li>
        </ul>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>
    $(function () {

        //需要输入的车牌数
        var num = 6;

        //切换键盘
        $('.changeContentBtn').click(function () {
            if ($(this).html() == 'ABC') {
                $('#textBox').show();
                $('#provienceBox').hide();
            } else {
                $('#textBox').hide();
                $('#provienceBox').show();
            }
        });

        //新能源点击事件
        $('.xinnengyuan').click(function () {
            num = 7;
            $(this).removeClass('xinnengyuan');
        });

        //获取当前车牌数字索引
        function getIndex() {
            var index = 0;
            $('.carLicenseMain ul li').each(function () {
                var reg = new RegExp('active');
                if (reg.test($(this).attr('class'))) {
                    index = $(this).index();
                }
            })
            return index;
        }

        //自定义键盘处理函数
        function keyboard(num, self) {
            var index = getIndex();
            if (index <= num) {
                if (index == num) {
                    $('.carLicenseMain ul li.active').html($(self).html());
                } else {
                    $('.carLicenseMain ul li.active').html($(self).html()).removeClass('active').next().addClass('active');
                }
                $('#textBox').show();
                $('#provienceBox').hide();
            }
        }

        //省份键盘点击事件
        $('#provienceBox ul li:not(.other)').click(function () {
            var self = this;
            keyboard(num, self);
        });

        //文本键盘点击事件
        $('#textBox ul li:not(.other)').click(function () {
            var self = this;
            keyboard(num, self);
        });

        //回退按钮点击事件
        $('.deleteBtn').click(function () {
            console.log("删除车牌");
            var index = getIndex();
            if (index == num) {
                if ($('.carLicenseMain ul li.active').html() != '') {
                    $('.carLicenseMain ul li.active').html('');
                } else {
                    if (index == 7) {
                        $('.carLicenseMain ul li:last-of-type').addClass('xinnengyuan');
                        num = 6;
                    }
                    $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
                }

            } else if (index < num && index > 1) {
                $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('');
            } else if (index == 1) {
                $('.carLicenseMain ul li.active').removeClass('active').prev().addClass('active').html('省');
            }
        });

        // $('#confirm').click(function () {
        //     // addCar();
        //     var plateNumber = "湘A12345";
        //     var communityId = $('li.checked').attr("communityId");
        //     addCar(plateNumber, communityId);
        // });

        $("#community").change(function () {
            //code...
            var checkValue = $("#community option:selected");
            var index = checkValue.attr("communityid");
            console.log(index);
        });

        //提交按钮点击事件
        $('#submitBtn').click(function () {
            var plateNumber = "";
            var carNumbers = $("#carNumber li");
            for (var i = 0; i < carNumbers.length; i++) {
                plateNumber += carNumbers[i].innerHTML;
            }
            if (plateNumber.length != num + 1) {
                $.toast("请填写车牌", 'cancel');
                return;
            }
            var communityId = $("#community option:selected").attr("communityid");
            // console.log(communityId);
            // console.log(plateNumber);
            addCar(plateNumber, communityId);
        });

        function addCar(plateNumber, communityId) {
            if (!plateNumber) {
                $.toast("请输入车牌", 'cancel');
                return;
            }
            if (!communityId) {
                $.toast("请选择小区", 'cancel');
                return;
            }
            $.ajax({
                type: 'POST',
                data: {
                    "communityId": communityId,
                    "carNo": plateNumber
                },
                url: "/mobile/plate/saveCarInfo",
                success: function (json) {
                    if (json.code == 0) {
                        showModel()
                    } else {
                        $.toast(json.msg, 'cancel')
                    }
                }
            });

        }

        function showModel() {
            $.modal({
                title: "提示",
                text: "添加成功",
                buttons: [
                    {
                        text: "继续添加", className: "primary", onClick: function () {
                            window.location.href = "/mobile/plate/add";
                        }
                    },
                    {
                        text: "我的车辆", className: "default", onClick: function () {
                            window.location.href = "/mobile/plate/list";
                        }
                    }
                ]
            });
        }
    })
</script>
</body>
</html>